<template>
    <fieldset>
        <legend>组件缓存</legend>
        <button @click="toggleTab" :class="{active:componentName==='tab'}">切换tab</button>

        <button @click="toggleOther" :class="{active:componentName==='other'}">切换其他</button>
       <keep-alive excludes="other">
        <div class="container" is="componentName"></div>
       </keep-alive>
        
        
    </fieldset>
    
</template>
<script>

// keeplive作用
// 保持组件状态避免组件重复渲染带来的问题（缓存组件）
//keeplive 一般套在动态组件外层

// include 包含 组件名字写到include属性中那么组件会被缓存
// excludes 排除  组件名字写到excludes属性中那么组件不会缓存
// max 最多可以缓存多少个组件实例

import tab from"../tab"
import other from"../other"
export default{
    data () {
        return {
            componentName:'tab',
            tab:'tab'
        }
    },
    comments:{
        tab,
        other
    },
    methods: {
       toggleOther(){
        this.componentName='other'
       },
       toggleTab(){
        this.componentName='tab'
       }
    },
}

</script>